<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.outer{
				width: 400px;
				height: 200px;
				overflow: hidden;
				border-radius: 16px;
				position: relative;
			}
			.outer .inner{
				height: 100%;
				position: relative;
				left: 0px;
				display: flex;
				transition: all 1s;
			}
			.outer .inner a{
				width: 100%;
				height: 100%;
				flex-shrink: 0;
			}
			.outer .inner img{
				width: 100%;
				height: 100%;
				flex-shrink: 0;
				object-fit: cover;
			}
			.outer .shift .btn{
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto 0;
				background-color:teal;
				color: white;
				width: 25px;
				height: 25px;
				border-radius: 8px;
				font-size: 15px;
				font-weight: bold;
				line-height: 25px;
				text-align: center;
				user-select:none;
			}
			.outer .bottom{
				position: absolute;
				bottom: 10px;
				left: 0px;
				right: 0px;
				margin: 0 auto;
				width: max-content;
				display: flex;
				gap: 10px;
			}
			.outer .shift .left{
				left: 10px;
			}
			.outer .shift .right{
				right: 10px;
			}
			.bottom .b1{
				width:15px;
				height: 15px;
				border-style: solid;
				border-radius: 50%;
				border-color: white;
				background-color:black;
				opacity: 0.3;	
			}
		</style>
	</head>
	<body>
	<div class="outer">
		<div class="inner" onmouseover="doStop()" onmouseout="doStart()">
			<a href="#" target="_blank"><img  src="百度图片/1.png"/></a>
			<a href="#" target="_blank"><img  src="百度图片/2.jpg"/></a>
			<a href="#" target="_blank"><img  src="百度图片/3.jpg"/></a>
			<a href="#" target="_blank"><img  src="百度图片/4.png"/></a>
		</div>
		<div class="bottom" onmouseover="doStop()" onmouseout="doStart()">
			<div class="b1" ></div>
			<div class="b1" ></div>
			<div class="b1" ></div>
			<div class="b1" ></div>
		</div>
	</div>
	<script>
	    let left = document.querySelector('.left')
	    let right = document.querySelector('.right')
	    let min = document.querySelectorAll('.b1')
	    let images = document.querySelector('.inner')
		let di=document.querySelector(".bottom")
	    let index = 0
		let time;
		function doStop() {
			clearInterval(time);
		}
		function doStart() {
			timer();
		}
	    function position() {
	        images.style.left = (index * -100) + "%"
	    }
		function positions() {
			if(index>0){
			min[index].style.backgroundColor="blue";
		    min[index-1].style.backgroundColor="black";
			min[index-1].style.opacity=0.3;
			}else if(index==0){
				min[index].style.backgroundColor="blue";
				min[3].style.backgroundColor="black";
				min[3].style.opacity=0.3;
			}
		}
	    function add(){
	        if(index >= min.length-1){
	            index = 0
	        }else{
	            index++
	        }
	    }
	    function desc(){
	        if(index <1){
	            index = min.length-1
	        }else{
	            index--
	        }
	    }
	    // function timer(){
	        time = setInterval(()=>{
	            index++
	            desc()
	            add()
	            position()
				positions()
	        },1000)
	    // }
	    left.addEventListener('click',()=>{
	        desc()
	        position()
	        clearInterval(time)
			positions()
	    })
	    right.addEventListener('click',()=>{
	        add()
	        position()
	        clearInterval(time)
			positions()
	    })
	    for(let i = 0;i<min.length;i++){
	        min[i].addEventListener('click',()=>{
	            index = i
	            position()
	            clearInterval(time)
				positions()
	        })
	    }
	    // timer()
	</script> 
	</body>
</html>